<template>
  <div class="course-detail">
    <header>
      <h1>{{ course.title }}</h1>
      <button @click="goBack" class="back-button">返回</button>
    </header>
    <main>
      <div class="course-info">
        <p><strong>类别：</strong> {{ course.category }}</p>
        <div class="progress-bar">
          <div class="progress" :style="{ width: `${course.progress}%` }"></div>
        </div>
        <p>进度：{{ course.progress }}% 完成</p>
      </div>
      <div class="course-content">
        <h2>课程内容</h2>
        <ul>
          <li v-for="(section, index) in courseSections" :key="index">
            {{ section }}
          </li>
        </ul>
      </div>
      <button @click="startLearning" class="start-button">开始学习</button>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const course = ref({})
const courseSections = ref([])

onMounted(() => {
  // 在实际应用中，这里应该从API获取课程详情
  course.value = {
    id: parseInt(route.params.id),
    title: '示例课程',
    category: '示例类别',
    progress: 30
  }
  courseSections.value = [
    '第一章：课程介绍',
    '第二章：基础概念',
    '第三章：进阶技巧',
    '第四章：实战应用',
    '第五章：总结与展望'
  ]
})

const goBack = () => {
  router.push('/')
}

const startLearning = () => {
  // 这里应该跳转到实际的学习页面或开始课程
  console.log('开始学习')
}
</script>

<style scoped>
.course-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
  background-color: #ffffff;
}

header {
  background-color: #1e90ff;
  color: white;
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 20px;
}

h1,
h2 {
  margin: 0;
}

.back-button,
.start-button {
  background-color: white;
  color: #1e90ff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.back-button:hover,
.start-button:hover {
  background-color: #f0f0f0;
}

.course-info {
  background-color: #f0f8ff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.progress-bar {
  background-color: #e0e0e0;
  border-radius: 10px;
  height: 10px;
  width: 100%;
  overflow: hidden;
  margin: 10px 0;
}

.progress {
  background-color: #1e90ff;
  height: 100%;
  transition: width 0.5s ease-in-out;
}

.course-content {
  background-color: #f0f8ff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: white;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 15px;
  transition: all 0.3s ease;
}

li:hover {
  background-color: #e6f2ff;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.start-button {
  display: block;
  width: 100%;
  padding: 15px;
  font-size: 1.1em;
  background-color: #1e90ff;
  color: white;
}

.start-button:hover {
  background-color: #1a7ee0;
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 10px;
  }

  .back-button {
    width: 100%;
  }
}
</style>
